/*
 * @Author: ly
 * @Date: 2019-10-08 17:41:35
 * @Last Modified by: idzeir
 * @Last Modified time: 2020-04-02 11:05:49
 */
import React, { MouseEvent, CSSProperties } from 'react';
import merge from 'classnames';
import css from './index.less';
import ImgLoader from '../../../common/img-loader';

interface IContentTag {
  tagName?: string;
  className: string;
  src?: string;
  href?: string;
  innerHTML?: string;
  style?: CSSProperties;
  clickHandler?: (event?: MouseEvent) => void;
}
interface IResultProps {
  cover: boolean;
  coverLogo: string;
  coverTitle: string;
  coverContent: string;
  coverClickHandler: () => void;
  contentTags: IContentTag[];
  clickHandler: () => void;
}
export default class Modal extends React.PureComponent<IResultProps> {
  renderContent() {
    if (this.props.cover) {
      return (
        <>
          <div
            className={css.coverLogo}
            style={{
              backgroundImage: `url(${this.props.coverLogo})`,
            }}
            onClick={this.props.coverClickHandler}
          />
          <div className={css.coverTitle}>
            {this.props.coverTitle}
            <br />
            给你发了一个红包
          </div>
          <div className={css.coverMsg}>{this.props.coverContent}</div>
        </>
      );
    }
    if (this.props.contentTags.length) {
      const content = this.props.contentTags.map((item, index) => {
        const classNameList = item.className.split(' ');
        const cssClassNameList = classNameList.map((className) => css[className]);
        const className = merge(...cssClassNameList);
        if (item.tagName === 'img') {
          return <ImgLoader alt="" key={index} className={className} src={item.src} />;
        }
        if (item.tagName === 'a') {
          return (
            <a key={index} className={className} href={item.href}>
              {item.innerHTML}
            </a>
          );
        }
        return (
          <div key={index} className={className} style={item.style} onClick={item.clickHandler}>
            {item.innerHTML}
          </div>
        );
      });
      return content;
    }
  }

  render() {
    return (
      <div className={this.props.cover ? merge(css.result, css.cover) : css.result} onClick={this.props.clickHandler}>
        {this.renderContent()}
      </div>
    );
  }
}
